<!-- 通用echarts表 -->
<template>
        <div ref="myChart" id="myChart" ></div>
</template>

<script>
export default {
	name: 'echarts',
	props: {
		option: {
			type: Object,
			required: true
		},
	},
	data () {
		return {
		};
	},

	components: {},

	computed: {},

	mounted () {
		this.setMyEchart(); // 页面挂载完成后执行
	},

	methods: {
		setMyEchart () {
			const myChart = this.$refs.myChart; // 通过ref获取到DOM节点
			if (myChart) {
				const thisChart = this.$echarts.init(myChart); // 利用原型调取Echarts的初始化方法
				const option = this.option; // {}内写需要图表的各种配置，可以在官方案例中修改完毕后复制过来
				thisChart.setOption(option); // 将编写好的配置项挂载到Echarts上
				window.addEventListener('resize', function () {
					thisChart.resize(); // 页面大小变化后Echarts也更改大小
				});
			}
		}
	},
	watch: {
		option () {
			this.setMyEchart();
		}
	}
};

</script>
<style lang='less' rel="stylesheet/less" scoped>
</style>
